<template>
  <div class="newcase">
    <a-card>
      <div class="newcase-title">
        <a-select placeholder="请选择分类" style="width: 200px;z-index:9" @change="handleChange">
          <a-select-option style="width: 200px;z-index:99" v-for="item in selClass" :key="item.code" :value="item.code">{{ item.name }}</a-select-option>
        </a-select>
        <a-input style="margin-left:20px;width:800px" placeholder="请输入标题" v-model="title" />
      </div>
    </a-card>
    <!-- 富文本 -->
    <a-card style="margin-top:20px">
      <editor-bar v-model="info" @change="getEditor"></editor-bar>
      <br>
      <a-button type="primary" @click="submit">提交</a-button>
    </a-card>
  </div>
</template>

<script>
import EditorBar from '@/components/Editor/WangEditor'
import { getCaseClass, doCaseAdd } from '@/api/user/caselib'
export default {
  name: 'Newcase',
  components: {
    EditorBar
  },
  data () {
    return {
      code: '',
      title: '',
      info: '',
      idd: '',
      selClass: [
        // {
        //   id: 12,
        //   code: 1,
        //   name: '家居'
        // },
        // {
        //   id: 13,
        //   code: 2,
        //   name: '家居'
        // },
        // {
        //   id: 14,
        //   code: 3,
        //   name: '家居'
        // }
      ]
    }
  },

  computed: {

  },
  created () {
    // this.idd = this.$route.query.id
    // console.log('idd', this.$route.query.id)
    this.getCaseClass()
  },
  mounted () {

  },
  methods: {
    doCaseAdd (code, title, content) {
      doCaseAdd({
        code: code,
        title: title,
        content: content
      }).then(res => {
        console.log(res)
        // this.$message.info('添加成功!')
        this.$router.push({
        // name: 'passGoods',
          path: `/admin/caseLibrary/caseLibrary`
          // query: {
          //   id: val
          // }
        })
        this.title = ''
        this.info = ''
      }).catch(err => {
        console.log(err)
        this.$message.info('添加失败!')
      })
    },
    getCaseClass () {
      getCaseClass({}).then(res => {
        // console.log(res.result)
        this.selClass = res.result.map(function (obj) {
          var rObj = {}
          rObj.id = obj.id
          rObj.code = obj.code
          rObj.name = obj.name
          return rObj
        })
        // console.log('selClass', this.selClass)
      }).catch(err => {
        console.log(err)
      })
    },
    // 提交
    submit () {
      if (this.code !== '') {
        if (this.title !== '') {
          if (this.info !== '') {
            this.doCaseAdd(this.code, this.title, this.info)
          } else {
            this.$message.info('请填写内容!')
          }
        } else {
          this.$message.info('请填写标题!')
        }
      } else {
        this.$message.info('请选择分类!')
      }
    },
    getEditor (value) {
      // console.log(value)
      this.info = value
    },
    handleChange (value) {
      // console.log(`selected ${value}`)
      this.code = value
    }
  }
}
</script>

<style lang='less' scoped>
.newcase{
    .newcase-title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}
</style>
